<template>
    <div>
        <div class="cardiv">
            <div class="car" style="height: 65px;">
            <ul>
                <li><h2>设置登录名</h2></li>
            </ul>
            </div>
           <ul>
               <li style="margin-top:15px;">
                  <span style="padding-right: 36px;font-size: 13px;">请输入用户名:</span>
                <el-input  placeholder="请输入用户名" style="width:30%;margin-top: 10px;margin-left: -13px;"></el-input>
                </li>
                <li style="font-size: 13px;padding-top: 7px;color: #8c8383;">（用户名只能为长度在4-30的数字、英文字母(不区分大小写），“-”、“/”、空格等特殊字符不能使用。)</li>
           </ul>
           <div><div class="passwordent">确定</div></div>
        </div>
    </div>
</template>

<script>
export default {
  methods: {
  
  }
};
</script>

<style>
.cardiv {
  width: 1021px;
  height: 760px;
  margin-left: 13px;
}
.car {
  width: 100%;
  height: 90px;
  padding-left: 3px;
  border-bottom: solid 1px #ccc;
}
.car ul {
  margin-top: 5px;
}
.car div {
  float: right;
  margin-top: -32px;
  margin-right: 69px;
  width: 70px;
  height: 30px;
  border: 1px solid #ccc;
  line-height: 30px;
  text-align: center;
  font-size: 13px;
  color: #4c4f52;
}
.car div:hover {
  transition: all 0.3s linear;
  color: aquamarine;
  border: 1px solid aquamarine;
}
.cardiv p {
  margin-top: 15px;
  color: #48576a;
  font-size: 14px;
}
.caraddned{
    margin-left: 63px;
    margin-top: 5px;
}
.caraddned div:first-child {
  color: red;
  font-size: 13px;
}
.passwordent {
  width: 137px;
  height: 37px;
  background: #0072ff;
  text-align: center;
  line-height: 35px;
  margin-left: 14%;
  color: white;
  border-radius: 5%;
  margin-top: 53px;
}
.passwordent:hover{
  transition: all 0.3s linear;
  background: #4334ab;
}

</style>
